@extends('backend::layout')

@section('title', '评测列表')

@section('content')
    <div class="card border-no">
        <div class="card-body">
            <div class="col-lg-12 col-sm-12 col-xs-12">
                <canvas id="canvas"></canvas>
            </div>
        </div>
    </div>
@stop

@section('script')
    <script>

        //function createConfig(data, title) {
        function createConfig(labels, data, title) {
            console.log("createconfig");
            console.log(labels)
            console.log(data)

            return {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        borderColor : 'red',
                        backgroundColor : 'red',
                        fill:false,
                        label:"学生数",
                        data:data
                    }]

                },
                options: {
                    responsive: true,
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: title
                    },
                    scales:{
                        yAxes:[{
                            ticks:{
                                stepSize:1,
                                beginAtZero:true
                            },
                            scaleLabel: {
                                display: true,
                                labelString: '学生数'
                            }
                        }],
                        xAxes:[{
                            scaleLabel: {
                                display: true,
                                labelString: '{{ $xlabelname }}',
                            }
                        }]
                    }
                }
            };
        }

        $("document").ready(function () {
            var container = document.querySelector('#chart');

            $.get('{{route("admin.analysis.getchildrendata")}}', function (data) {
                var colorNames = Object.keys(window.chartColors);

                console.log(colorNames);

                if (data.status == 200) {
                    console.log(data.data);
                    var result = data.data;
                    var colorNum = 0;

                    //$.each(result,function(i,val){
                    var thisdata = {};
                    var colorName = colorNames[colorNum % colorNames.length];
                    colorNum++;

                    thisdata.borderColor = window.chartColors[colorName];
                    thisdata.backgroundColor = window.chartColors[colorName];

                    var thisconfig = createConfig(result.x, result.y, "学生统计");
                    var ctx = document.getElementById('canvas').getContext('2d');
                    //var ctx = canvas.getContext('2d');
                    var chart = new Chart(ctx, thisconfig);
                    console.log(chart);
                    //})
                }

            })


        })
    </script>
@stop